<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <title>快吃网，将最好的餐厅带到你家</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reser.css">
    <!-- 引入主题样式 -->
    <link rel="stylesheet" href="./css/theme.css">
    <!-- 引入项目样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入网站的偏爱图标 -->
    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
    <!-- 引入字体图标 -->
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
    <!-- 搭建解构框架 少用div span 要用语义化标签header  main  footer-->
    <!-- 头部框架header -->
    <header class="header">
        <div class="w container"><!-- 版心与版心居中设置 -->
            <a href="#" class="logo">
                <img src="./images/logo.svg" alt="外卖网" width="138" height="38">
            </a>
            <ul class="nav-bar">
                <li class="nav-bar-item"><!-- 注意语义化标签 -->
                    <a href="#" class="navbar-link">首页</a>
                </li>
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">关于我们</a>
                </li>
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">合作餐厅</a>
                </li>
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">联系方式</a>
                </li>
            </ul>
            <div class="header-btn">
                <button class="cart-btn">
                    <i class="fa fa-cart-plus" aria-hidden="true"></i><!-- aria-hidden="true"防止对后边干扰 -->
                </button>
                <a href="#" class="btn">现在订购</a>
            </div>
        </div>
    </header>
    <!-- 主体区域main=>section1,2，3.... -->
    <main>
        <section class="section1">
            <div class="w content">
                <div class="cotainer" data-reveal="left"><!-- 自定义属性选择器 -->
                    <h1>最好的餐厅<br>
                        带到你家 
                    </h1>
                    <p>
                        我们将和最好的餐厅紧密合作，将最美好的食物快速送到你的房间里
                    </p>
                    <button class="btn">
                        现在订购
                    </button>
                    <!-- 动画效果实现的思路 -->
                     <!-- 默认状态下
                      btn上方存在一个伪元素：：after通过overflow：hidden隐藏了 X1
                      btn覆盖了一个；；before（透明底） 默认状态下通过display：none隐藏了    X2                
                     -->
                      <!-- 鼠标移入后
                       btn上方的x1滑下来了一个白底的元素
                       btn的文字颜色变成了marigold
                       x2显示了 -->
                </div>
                <div class="section1-banner relative" data-reveal="right"><!-- 背景图片光标拖不动，而图片可以 -->
                    <img src="./images/hero-banner.png" alt="" class="w-100">
                    <img src="./images/hero-shape-1.svg" alt="" class="pos-1 absolute">
                    <img src="./images/hero-shape-2.svg" alt="" class="pos-2 absolute">
                </div>
            </div>
        </section>
        <section class="section2">
            <div class="w content">
                <h1 data-reveal="buttom">如何使用我们的服务</h1>
                <p data-reveal="buttom">拿起手机打开APP，只需三步美食即刻而来</p>
                <ul>
                    <li data-reveal="left">
                        <img src="./images/instructuion-1.png" alt="" class="w-100"><br>
                        <h2>第一步 选择餐厅</h2>
                        <br>
                        <p>这里的餐厅可以满足大家各种口味需求!</p>
                    </li>
                    <li data-reveal="buttom">
                        <img src="./images/instructuion-2.png" alt="" class="w-100"><br>
                        <h2>第二步 选择商品</h2>
                        <br>
                        <p>找到你最想要的美食，然后下单!</p>
                    </li>
                    <li data-reveal="right">
                        <img src="./images/instructuion-3.png" alt="" class="w-100"><br>
                        <h2>第三步 等待送达</h2>
                        <br>
                        <p>飞速前往你的住址，稍等一下马上就来!</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="section3">
            <div class="content w">
                <div class="text-area" data-reveal="left"><!-- data-reveal="left"动画效果 -->
                    <h1>所在城市的最好餐厅</h1>
                    <p>这里展示了各种风格的餐厅，查看他们的评分来确认你的选择。</p>
                </div>
                <div class="rest rest-1" data-reveal="right">
                    <img src="./images/rest-1.jpg" alt="">
                    <h3>普宁顿咖啡馆</h3>
                    <ul class="star-lists">
                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    </ul>
                    <div class="two-btn">
                        <button>美食咖啡</button>
                        <button>经典牛排</button>
                    </div>
                    <p>来自美国的纯正咖啡，满足咖啡爱好者的各种需求，还提供各种熟食，特别推荐牛排！</p>
                
            </div>
            <div class="rest rest-2" data-reveal="left">
                <img src="./images/rest-2.jpg" alt="">
                <h3>维明顿西餐厅</h3>
                <ul class="star-lists">
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                </ul>
                <div class="two-btn">
                    <button>意大利菜</button>
                    <button>特色披萨</button>
                </div>
                <p>如果你喜欢意大利美食这家餐厅不可错过！</p>
            </div>
            <div class="rest rest-3" data-reveal="right">
                <img src="./images/rest-3.jpg" alt="">
                <h3>国王之手</h3>
                <ul class="star-lists">
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                </ul>
                <div class="two-btn">
                    <button>芝士汉堡</button>
                    <button>香辣炸鸡</button>
                </div>
                <p>风靡全球的汉堡炸鸡店，最普通的食物是所有人的最爱！</p>
            </div>
        </div>
        <button>所有餐厅</button>
        </section>
        <section class="section4">
            <div class="content w">
                <img src="./images/cta-banner.png" alt="" class="w-100" data-reveal="left">
                <div class="text-area" data-reveal="right">
                    <h2>将喜欢的食物从餐厅带到你的餐桌</h2>
                    <p>
                        我们致力于打造最好的外送服务，你能享受到和餐厅中完全一样的美味食物！
                    </p>
                    <button class="btn">现在订购</button>
                </div>
            </div>
        </section>
        <section class="section5">
            <div class="content w">
                <div class="title" data-reveal="left">
                    服务创造美味
                </div>
                <div class="item-area" data-reveal="buttom">
                    <h3>976</h3>
                    <span>满意的顾客</span>
                </div>
                <div class="item-area" data-reveal="buttom">
                    <h3>12</h3>
                    <span>最好的餐厅</span>
                </div>
                <div class="item-area" data-reveal="right">
                    <h3>1K+</h3>
                    <span>送达的食物</span>
                </div>
            </div>
        </section>
        <section class="section6">
            <div class="content w">
                <div class="text-area" data-reveal="left">
                    <h2>客户对我们的评价</h2>
                    <p>
                        我一直以来都排斥通过外卖点的食物，因为我觉得这样的食物品质不好，但快吃网改变了我的看法，尝试过后发现送给我的食物和餐厅中点购的一模一样！
                    </p>
                    <div class="comments">
                        <img src="./images/testi-avatar.jpg" alt="">
                        <div class="name">
                            <span>詹姆斯·哈登</span>
                            <div class="stars">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img" data-reveal="right">
                    <img src="./images/testimonial-banner.png" alt="" class="w-100">
                </div>
            </div>
        </section>
        <section class="section7">
            <div class="content w">
                <h1 data-reveal>想要加入我们吗？</h1>
                <div class="cotainer">
                    <div class="item relative" data-reveal="left">
                        <div class="img">
                            <img src="./images/partner-1.jpg" alt="" class="w-100">
                        </div>
                        <div class="info absolute" >
                            <h3>外卖骑手</h3>
                            <button>了解更多</button>
                        </div> 
                    </div>
                        <div class="item relative" data-reveal="right">
                            <div class="img">
                                <img src="./images/partner-2.jpg" alt="" class="w-100">
                            </div>
                            <div class="info absolute" >
                                <h3>供应商</h3>
                                <button>了解更多</button>
                            </div>
                        </div>
                </div>
            </div>
        </section>
        <section class="section8">
            <div class="content w">
                <div class="img" data-reveal="left">
                    <img src="./images/newsletter-banenr.png" alt="" class="w-100">
                </div>
                <div class="text-area" data-reveal="right">
                    <div class="text">
                        <h2>获取你喜欢<br>餐厅的每日菜单</h2>
                        <input type="text" placeholder="输入邮箱地址">
                    </div>
                    <button>点击订阅</button>
                </div>
            </div>
        </section>
    </main>
    <!-- 底部footer -->
     <footer class="footer">
        <div class="content w">
            <div class="footer1">
                <img src="./images/logo-footer.svg" alt="">
                <h2>最好的餐厅<br>带到你家</h2>
                <p>我们将和最好的餐厅紧密合作，将美妙的食物快速送达你的房间里</p>
            </div>
            <div class="footer2">
                <h4>网站地图</h4>
                <a href="#">首页</a>
                <a href="#">关于我们</a>
                <a href="#">合作餐厅</a>
                <a href="#">加入我们</a>
            </div>
            <div class="footer3">
                <h4>联系方式</h4>
                <p class="p1">
                    <i class="fa fa-map-marker"></i>
                    石家庄市高迁
                </p>
                <p>
                    <i class="fa fa-envelop"></i>gq@gq.com
                </p>
                <p>
                    <i class="fa fa-phone"></i>888888888
                </p>
            </div>
        </div>
        <div class="copyright">
            copyright 2024 codewithgq.All rights reserved
        </div>
     </footer>
     <script src="./js/index.js">       
     </script>
</body>
</html>